const ThemeColorReplacer = require("webpack-theme-color-replacer");
const generate = require("@ant-design/colors/lib/generate").default;
const client = require("webpack-theme-color-replacer/client");
const { defaultColor } = require("./theme");

const getAntdSerials = (color) => {
  // 淡化（即less的tint）
  const lightens = new Array(9).fill().map((t, i) => {
    return ThemeColorReplacer.varyColor.lighten(color, i / 10);
  });
  const colorPalettes = generate(color);
  const rgb = ThemeColorReplacer.varyColor
    .toNum3(color.replace("#", ""))
    .join(",");
  return lightens.concat(colorPalettes).concat(rgb);
};

const changeColor = (newColor) => {
  var options = {
    newColors: getAntdSerials(newColor), // new colors array, one-to-one corresponde with `matchColors`
    changeUrl(cssUrl) {
      return `/${cssUrl}`; // while router is not `hash` mode, it needs absolute path
    },
  };
  return client.changer.changeColor(options, Promise);
};

const updateTheme = (newPrimaryColor) => {
  changeColor(newPrimaryColor).then(() => {
    console.log("current color:", newPrimaryColor);
  });
};

const themePluginOption = {
  fileName: "css/theme-colors-[contenthash:8].css",
  matchColors: getAntdSerials(defaultColor), // 默认主色系列
  // 改变样式选择器，解决样式覆盖问题
  changeSelector(selector) {
    switch (selector) {
      case ".ant-calendar-today .ant-calendar-date":
        return (
          ":not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)" +
          selector
        );
      case ".ant-btn:focus,.ant-btn:hover":
        return ".ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)";
      case ".ant-btn.active,.ant-btn:active":
        return ".ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)";
      case ".ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon":
      case ".ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon":
        return ":not(.ant-steps-item-process)" + selector;
      // fixed https://github.com/vueComponent/ant-design-vue-pro/issues/876
      case ".ant-steps-item-process .ant-steps-item-icon":
        return ":not(.ant-steps-item-custom)" + selector;
      case ".ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover":
      case ".ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover":
        return ".ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover";
      case ".ant-menu-horizontal > .ant-menu-item-selected > a":
      case ".ant-menu-horizontal>.ant-menu-item-selected>a":
        return ".ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item-selected > a";
      case ".ant-menu-horizontal > .ant-menu-item > a:hover":
      case ".ant-menu-horizontal>.ant-menu-item>a:hover":
        return ".ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item > a:hover";
      default:
        return selector;
    }
  },
};

const createThemeColorReplacerPlugin = () =>
  new ThemeColorReplacer(themePluginOption);

module.exports = {
  createThemeColorReplacerPlugin,
  updateTheme,
  changeColor,
};
